<template>
    <a-table :dataSource="dataSource" :columns="columns" :rowKey="rowKey" bordered size="small" style="" :loading="loading"
        :scroll="scroll" :pagination="pagination == false ? false : {
            ...pagination, showSizeChanger: true, showQuickJumper: true
        }"
        :row-selection="rowSelection" 
        @change="tableChange">
        <template #bodyCell="{ index, column, record }">
            <slot name="bodyCell" :index="index" :column="column" :record="record"></slot>
        </template>
    </a-table>
</template>
<script setup lang="ts">
import { computed, ref } from 'vue';

const porps = withDefaults(defineProps<{
    dataSource: any[],
    columns: any[],
    loading: boolean,
    rowKey?: string
    scroll?: any,
    pagination?: any,
    rowSelection?: any
}>(), {
    rowKey: 'id',
    scroll: () => {
        return { x: 1000}
    },
    pagination: () => {
        return {
            current: 1,
            pageSize: 10,
            total: 0,
            // showSizeChanger: true, // 显示 pageSize 切换器
        }
    },
})


const emit = defineEmits<{
    change: [any]
}>()

const tableChange = (e: any) => {
    emit('change', e)
}

</script>